<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>


<script>

  import echarts from 'echarts'
  import tdTheme from './theme.json'
  echarts.registerTheme('tdTheme', tdTheme)
  export default {
    name: 'dynamic',
    props: {
      text:String,
      up:String,
      down:String,
      data:String
    },
    watch:{
        'up':{
            handler:function(){
              this.$nextTick(() => {

                let up = this.up;
                let down = this.down;
                let data = this.data;

                let option = {
                  tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                      type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                  },
                  grid: {
                    left: '3%',
                    right: '20%',
                    bottom: '3%',
                    containLabel: true
                  },
                  xAxis : [
                    {
                      type : 'category',
                      data : [this.text],
                      axisTick: {
                        alignWithLabel: true
                      }
                    }
                  ],
                  yAxis : [
                    {
                      type : 'value',
                      minInterval : 1,
                      boundaryGap : [ 0, 1 ]
                    }
                  ],
                  series : [
                    {
                      type:'bar',
                      barWidth: '60%',
                      data:[data],
                      markLine:{
                        lineStyle: {
                          normal: {
                            type: 'dashed'
                          }
                        },
                        data:[
                          {
                            yAxis:up
                          },
                          {
                            yAxis:down
                          }
                        ]
                      }
                    }
                  ]
                }
                let dom = echarts.init(this.$refs.dom, 'tdTheme')
                dom.setOption(option)
              })
            }
        }

    },
    mounted () {
      this.$nextTick(() => {

        let up = this.up;
        let down = this.down;
        let data = this.data;

        let option = {
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '12%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : [this.text],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis : [
            {
              type : 'value',
              minInterval : 1,
              boundaryGap : [ 0, 1 ]
            }
          ],
          series : [
            {
              type:'bar',
              barWidth: '60%',
              data:[data],
              markLine:{
                lineStyle: {
                  normal: {
                    type: 'dashed'
                  }
                },
                data:[
                  {
                    yAxis:up
                  },
                  {
                    yAxis:down
                  }
                ]
              }
            }
          ]
        }
        let dom = echarts.init(this.$refs.dom, 'tdTheme')
        dom.setOption(option)
      })
    }
  }
</script>
